iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
0
Modern Web

Déjà-vu ? 要 Vue 過才知道系列 第 11

Vue 表單元素資料的雙向綁定 v-model

  • 分享至 

  • xImage
  •  

魔鏡的神奇之處就是會出現不同於鏡子前的影像,那和螢幕有什麼不ㄧ樣?

之前的幾天我們有說到 Vue 的運作是用資料來驅動(渲染)畫面,聽起來好像是「單向的」操作,但其實 Vue 也有雙向綁定的強大功能,這對在網頁上常需要以表單收集使用者輸入的資訊來說非常方便。今天我們就來使用 Vue 資料雙向綁定的特性,做表單資料的自動收集。

先去 codepen 看看效果:Vue.js Form Input Bindings 表單輸入綁定

通常在處理表單的時候,在填完表單時,通常以<from>標籤內的action屬性來傳送,但在 Vue 裡,可以先把<from>的預設submit動作取消,並以監聽的方式(v-on)處理:@submit.prevent(方法)。當我們按下送出表單鍵時,就會去執行handleSubmit這個方法,在方法裡再指定我們希望如何處理表單內的資料就可以了。

雙向資料綁定

想要獲取使用者的輸入,把表單中所獲得的值和資料做關聯的綁定,這樣就可以很方便地獲得輸入值和資料做互動,這種「雙向資料綁定」,就是無論更改哪一邊,都會同步的在兩邊更新資料,也會同時同步渲染到我們的頁面中。這樣的運作很像是照鏡子,一但資料雙向綁定,就會如同照鏡子般「一模一樣」了。

表單裡的標籤綁定

透過表單提取使用者要拿到的資料,主要以v-model來做資料的雙向綁定,達到自動收集填入資料的目的。表單裡有單純的輸入(text/textarea)、單選項(radio)、複選項(checkbox)和選單(select),實例中我們必須先在data裡初始化我們會用到的值,這些初始值則是對應到 HTML 表單標籤裡的value,例如,如果我們希望預設的radio選項是 female,在data裡的sex初始,給female就可以了,以此類推。

但需要注意的是,因為複選項(checkbox)是可以複選的,所以初始時也必須是陣列格式才能複選。

另外,在選單(select)的部分,可以在實例的data中先把物件型態的陣列準備好,然後在 HTML 使用v-for迴圈的方式讀取選單裡的選項。要特別注意的是,通常在資料庫裡,我們需要的會是這些屬性的id而非文字,所以物件型態的陣列可以給兩個屬性:city.namecity.id,找到id就可找到對應的城市名。
而這個選單(select)的初始值,也就是v-model綁定的cityId,在實例的data裡也須先初始化好。

指定選單資料型別

如果我們希望使用者所輸入的資料是固定的某一資料型別,例如可以計算的number,那麼我們也可以在 HTML 標籤的屬性上指定 v-model 的資料型別,確保同步時使用者更動回來的是數字。例如:

<input v-model="productPrice" type="number" />
<p>商品價格:{{ productPrice }}</p>

HTML 的部分

<div id="app">
  <form action="xxx" @submit.prevent="handleSubmit">
    <p><span>Name : </span><input type="text" v-model="name" /></p>
    <p>
      <span>Password : </span><input type="password" name="pwd" v-model="pwd" />
    </p>
    <p>
      <span>Sex : </span>
      <input type="radio" name="" id="female" value="female" v-model="sex" />
      <label for="female">Femme</label>
      <input type="radio" name="" id="male" value="male" v-model="sex" />
      <label for="male">Home</label>
    </p>
    <p>
      <span>Hobby : </span>
      <input type="checkbox" value="travel" id="travel" v-model="hobbys" />
      <label for="travel">Travel</label>
      <input type="checkbox" value="cinema" id="cinema" v-model="hobbys" />
      <label for="cinema">Cinema</label>
      <input type="checkbox" value="food" id="food" v-model="hobbys" />
      <label for="food">Food</label>
      <input type="checkbox" value="sport" id="sport" v-model="hobbys" />
      <label for="sport">Sport</label>
    </p>
    <p>
      <span>City : </span>
      <!-- 動態顯示 -->
      <select name="city" v-model="cityId">
        <option value="">No selection</option>
        <!-- 如果直接寫value="city.id" 會被當成是字串,需加上冒號 :value="" 成為表達式 -->
        <option :value="city.id" v-for="(city, index) in citys" :key="city.id">
          {{city.name}}
        </option>
      </select>
    </p>
    <p>
      <textarea
        name="info"
        cols="30"
        rows="10"
        placeholder="Self introduction"
        v-model="info"
      ></textarea>
    </p>
    <p>
      <input type="submit" value="register" />
    </p>
  </form>
</div>

實例中我們必須先在data的物件裡初始化我們會用到的值,這些初始值則是對應到 HTML 表單標籤裡的value

Vue 實例的部分

const vm = new Vue({
  el: '#app',
  data: {
    name: '',
    pwd: '',
    sex: 'female', // 預設值是從 value 抓來的
    hobbys: ['travel'],
    citys: [
      {
        id: 1,
        name: 'Paris',
      },
      {
        id: 2,
        name: 'Taipei',
      },
      {
        id: 3,
        name: 'London',
      },
      {
        id: 4,
        name: 'Tainan',
      },
    ],
    cityId: '2',
    info: '',
  },
  methods: {
    handleSubmit() {
      console.log(
        this.name,
        this.pwd,
        this.sex,
        this.hobbys,
        this.cityId,
        this.info
      );
    },
  },
});

參考:表單輸入綁定 — Vue.js

每日一句法文有益身心:Attention ! --> 阿.東.熊! --> 小心、請注意!


上一篇
v- 指令 v-for 列表渲染與操控
下一篇
v-on 監聽事件與修飾符
系列文
Déjà-vu ? 要 Vue 過才知道30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言